<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '咨询热线',
  },
}
</route>

<script lang="ts" setup>
import type { HotlineItem } from '@/service/app'
import { hotlineControllerFindAll as getHotLine } from '@/service/app'
// #ifdef MP-WEIXIN
// 微信小程序使用新的API
const systemInfo = uni.getWindowInfo()
const top = systemInfo.safeArea?.top ?? null
// #endif
function back() {
  uni.navigateBack()
}

const list = ref<HotlineItem[]>([])

onLoad(async () => {
  const res = await getHotLine({ })
  list.value = res.data || []
  console.log(list.value)
})

// 添加拨打电话的方法
function makePhoneCall(phoneNumber: string) {
  uni.makePhoneCall({
    phoneNumber,
    success: () => {
      console.log('拨打电话成功')
    },
    fail: (err) => {
      console.error('拨打电话失败', err)
    },
  })
}
</script>

<template>
  <!-- 导航栏 -->
  <view class="fixed top-0 z-20 w-full transition-all duration-300">
    <view :style="{ height: `${top}px` }" />
    <view class="h-11 flex items-center px-30rpx">
      <wd-icon name="thin-arrow-left" size="22px" color="black" @click="back" />
      <h1 class="flex-1 truncate px-6 text-lg text-black font-medium">
        咨询热线
      </h1>
    </view>
  </view>

  <view class="box-border min-h-[100vh] overflow-hidden bg-[linear-gradient(to_bottom,#ccddf2,#eef3f9)] p-5">
    <!-- 间隔占位 -->
    <view class="pt-5" :style="{ marginTop: `${top + 20}px` }" />
    <view class="mt-10 text-[60rpx]">
      咨询电话
    </view>
    <view class="text-[22rpx]">
      TELEPHONE FOR ENQUIRY
    </view>
    <view class="mt-10 text-[60rpx]">
      XX小镇·油车港
    </view>
    <view class="mt-30">
      <view v-for="(item, index) in list" :key="index" class="mt-4 flex items-center justify-between">
        <view>
          <view>{{ item.title }}</view>
          <view class="mt-5rpx text-28rpx text-gray-400">
            {{ item.time }}
          </view>
        </view>
        <!-- 只添加点击事件，不改变视觉效果 -->
        <view class="text-[#c1a58e]" @click="makePhoneCall(item.phone)">
          {{ item.phone }}
        </view>
      </view>
    </view>
  </view>
</template>
